<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" :collapse-transition=true active-text-color="#ffd04b"
        :collapse="isCollapse">
        <h3>{{ isCollapse ? '后台' : '后台管理' }}</h3>
        <!-- 这是没有子菜单的 -->
        <el-menu-item v-for="item in noChildren" @click="goMain(item)" :key="item.name" :disabled="item.disabled"
            :index="item.path">
            <i :class="`el-icon-${item.icon}`"></i>
            <span slot="title">{{ item.label }}</span>
        </el-menu-item>

        <!-- 这是有子菜单的 -->
        <el-submenu v-for="item in hasChildren" :key="item.label" :disabled="item.disabled" :index="item.label">
            <template slot="title">
                <i :class="`el-icon-${item.icon}`"></i>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group v-for="subItem in item.children" :key="subItem.label">
                <el-menu-item @click="goMain(subItem)" :index="subItem.path">{{ subItem.label }}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<script>
export default {
    name: 'CommonAside',
    data() {
        return {
            menuData: [
                {
                    path: '/',
                    name: 'home',
                    label: '首页',
                    icon: 's-home',
                    url: 'Home/Home',
                    disabled: false
                },
                {
                    path: '/user',
                    name: 'user',
                    label: '用户管理',
                    icon: 'user',
                    url: 'UserManage/UserManage',
                    disabled: false
                },
                {
                    label: '菜单管理',
                    icon: 'menu',
                    disabled: true,
                    children: [
                        {
                            path: '/firstMenu',
                            name: 'firstMenu',
                            label: '一级菜单',
                            url: 'FirstMenu/FirstMenu'
                        },
                        {
                            path: '/secondMenu',
                            name: 'secondMenu',
                            label: '二级菜单',
                            url: 'SecondMenu/SecondMenu'
                        },
                        {
                            path: '/thirdMenu',
                            name: 'thirdMenu',
                            label: '三级菜单',
                            url: 'ThirdMenu/ThirdMenu'
                        }
                    ]
                },
                {
                    label: '动漫管理',
                    icon: 's-platform',
                    disabled: false,
                    children: [
                        {
                            path: '/chinese',
                            name: 'chinese',
                            label: '国创',
                            url: 'AnimeItem/AnimeItem'
                        },
                        {
                            path: '/japanese',
                            name: 'japanese',
                            label: '日漫',
                            url: 'AnimeItem/AnimeItem'
                        },
                        {
                            path: '/other',
                            name: 'other',
                            label: '其他',
                            url: 'AnimeItem/AnimeItem'
                        }
                    ]
                },
                {
                    path: '/partyMain',
                    name: 'partyMain',
                    label: '漫展管理',
                    icon: 'goods',
                    url: 'PartyMain/PartyMain',
                    disabled: false
                },
                {
                    path: '/articleMain',
                    name: 'articleMain',
                    label: '文章管理',
                    icon: 'document',
                    url: 'ArticleMain/ArticleMain',
                    disabled: false
                },
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        goMain(item) {
            //被点击的 菜单 ，发送给 store
            this.$store.commit("changeMenu", item)
            //路由方法
            this.$router.push({
                path: item.path,
            })
        },
    },
    computed: {
        //menuData里的数据应该是从 后端接口中获取。
        //有子菜单
        hasChildren() {
            return this.menuData.filter(item => item.children)
        },
        //无子菜单
        noChildren() {
            return this.menuData.filter(item => !item.children)
        },
        isCollapse() {
            return this.$store.state.isCollapse
        }
    }
}
</script>
<style scoped>
h3 {
    color: #6bba5f;
    text-align: center;
    line-height: 20px;
    white-space: nowrap;
}

.el-menu {
    height: 100vh;
    border-right: none;
}

:not(.el-menu--collapse) {
    widows: 100%;
}
</style>